import React from 'React';
import {Row,Col} from 'antd';
import { Menu, Icon, Tabs, Message, Form, Input, Button, Checkbox, Modal} from 'antd';

const FormItem = Form.Item;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const TabPane = Tabs.TabPane;

export default class PCHeader extends React.Component {

    constructor(){
        super();
        this.state = {
            current:'top',
            modelVisible:false,//模态框隐藏显示
            action:'login',//登陆/注册
            hashLogined:false,//是否已经登陆
            userNickName:'',//用户名称
            userId:0
        }
    }

    setModalVisible(value){
        this.setState({modelVisible:value});
    };

    handleClick(e){
        if(e.key='register') {
            this.setState ({current:'register'});
            this.setModalVisible(true);
            this.setState({modelVisible:true});
        } else {
            this.setState({current:e.key});
        }
    }

    render(){
        let getFieldDecorator = this.props.form;
        const usershow = this.state.hashLogined
            ? <Menu.Item className='register'>
                <button type="primary">{this.state.userNickName}</button>
                &nbsp;&nbsp;
                <Link target='_blank'>
                    <Button>个人中心</Button>
                </Link>
                <Button type='danger'>退出</Button>
              </Menu.Item>
            :
            <Menu.Item className='register' key='register'>
                <Icon type='appstore'/>注册/登陆
            </Menu.Item>;
        return(
            <header>
                <Row>
                    <Col span={2}></Col>
                    <Col span={4}>
                        <a href="/" className="logo">
                            <img src="https://cdn4.iconfinder.com/data/icons/office-34/256/24-48.png" alt="logo"/>
                            <span>ReactNews</span>
                        </a>
                    </Col>
                    <Col span={16}>
                       <Menu mode="horizontal"  selectedKeys={[this.state.current]} onClick={this.handleClick.bind(this)}>
                           <Menu.Item key='top'>
                               <Icon type="appstore" />头条
                           </Menu.Item>
                           <Menu.Item key='shehui'>
                               <Icon type="appstore" />社会
                           </Menu.Item>
                           <Menu.Item key='guonei'>
                               <Icon type="appstore" />国内
                           </Menu.Item>
                           <Menu.Item key='guoji'>
                               <Icon type="appstore" />国际
                           </Menu.Item>
                           <Menu.Item key='yule'>
                               <Icon type="appstore" />娱乐
                           </Menu.Item>
                           <Menu.Item key='tiyu'>
                               <Icon type="appstore" />体育
                           </Menu.Item>
                           <Menu.Item key='keji'>
                               <Icon type="appstore" />科技
                           </Menu.Item>
                           <Menu.Item>
                               <Icon type="appstore" />时尚
                           </Menu.Item>
                           {usershow}
                       </Menu>
                        <Modal title='用户中心' wrapClassname='vertical-center-model' visable={this.state.modelVisible}
                        onclick={() => this.setModelVisible(false)}
                        onOk = {() => this.setModelVisible(false)} okText='关闭'>
                            <Form onSubmit={this.handleSubmit}>
                                {/*<FormItem>*/}
                                    {/*{getFieldDecorator('userName')(*/}
                                        {/*<Input  placeholder="请输入你的手机号" />*/}
                                    {/*)}*/}
                                {/*</FormItem>*/}
                                {/*<FormItem>*/}
                                    {/*{getFieldDecorator('password')(*/}
                                        {/*<Input  placeholder="请输入你的密码" />*/}
                                    {/*)}*/}
                                {/*</FormItem>*/}
                                {/*<FormItem>*/}
                                    {/*{getFieldDecorator('password')(*/}
                                        {/*<Input  placeholder="请再次输入你的密码" />*/}
                                    {/*)}*/}
                                {/*</FormItem>*/}
                                <Button type='primary'>注册</Button>
                            </Form>
                        </Modal>
                    </Col>
                    <Col span={2}></Col>
                </Row>
            </header>
        );
    };
}
